<template>
<el-container>
  <el-header>
      <el-row>
            <el-col :span="8">
                <el-tag type="dark">在校考试系统</el-tag>
                <el-tag type="dark">用户名:{{name}}</el-tag>
            </el-col>
            <el-col :span="8">&nbsp;</el-col>
            <el-col :span="8" align="right">
                 <el-button type="primary" size="mini">首页</el-button>
                 <el-button type="primary" size="mini">修改密码</el-button>
                 <el-button type="primary" size="mini">退出系统</el-button>
            </el-col>
      </el-row>
  </el-header>
  <el-container>
    <el-aside width="200px">
        <el-menu
         :default-openeds="['1','2']"
         text-color="white"
         background-color="#333333"
         router
        >
        <template v-for="x in list">
          <el-submenu :index="x.index">
                <template slot="title">{{x.name}}</template>
                 <template v-for="y in x.children">
                    <el-menu-item :index="y.url">
                        <template>{{y.name}}</template>
                    </el-menu-item>
                 </template>
          </el-submenu>
      </template>



        </el-menu>
    </el-aside>
    <el-main>
      <router-view></router-view>
    </el-main>
  </el-container>
</el-container>
</template>

<script>
  export default {
        name:"index",
        data(){
          return{
              list:[],
              name:"",//用户名
              ws:""
          }
        },
        methods:{
          createWs(){//创建websokcet对象
            var self = this;
            this.ws = new WebSocket("ws://localhost:8080/kickWs");
            //打开事件
            this.ws.onopen=function(){
               console.log("客户端打开");
               //发送用户名给服务端
               self.ws.send(self.name);
            }
            //关闭事件
            this.ws.onclose=function(){
               console.log("客户端关闭");
            }
            //接受服务端发送的消息
            this.ws.onmessage=function(msg){
               console.log("服务端发送的消息是"+msg);

               if(msg.data=="已登录"){
                  // 信息提示
                  self.$alert("你的账号已经在其他地方登录!","提示下线",{
                            confirmButtonText:"我要下线",
                            callback:function(){
                                  //回到登录页面
                                  self.$router.replace("/");
                                  //刷新样式
                                  self.$router.go(0);
                            }
                  })
               }

            },
            //异常触发的事件
            this.ws.onerror=function(rs){
              console.log("客户端出现异常"+rs);
            }

          }
        },
        mounted(){
            this.name = sessionStorage.getItem("name");
            //
            var self = this;
            var http =this.$http.get("/user/queryByName",{params:{"name":this.name}});
            http.then(function(rs){
                self.$message(rs.data.info);
                if(rs.data.success){
                  self.list = rs.data.data;
                }

            })
             //运行踢人服务
            this.createWs();

        }
  }

</script>

<style>
  html,body{
    margin: 0px;
    height: 100%;
  }
  .el-container {
      height: 100%;
    }


    .el-header {
      background-color: #444444;
      color: white;
      padding-top: 15px;

    }

    .el-aside {
      background-color: #333333;
      color: white;
      height: 100%;
    }

    .el-main {
      background-color: white;
      color: #333;
    }

</style>
